import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Select, SelectOption} from "../../../../packages";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  const options = [
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true },
  ];

  return () => (
    <DemoRow title="基本用法">
      <Select v-model={state.formData.name} width={200}>
        {options.map(opt => (
          <SelectOption value={opt.value} key={opt.value}>
            {opt.label}
          </SelectOption>
        ))}
      </Select>
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      name: ["lucy", "jack", "Yiminghe", "disabled"]
    } as any
  });

  const options = [
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true },
  ];

  return () => (
    <DemoRow title="多选">
      <Select v-model={state.formData.name} width={200} multiple>
        {options.map(opt => (
          <SelectOption value={opt.value} key={opt.value}>
            {opt.label}
          </SelectOption>
        ))}
      </Select>
      <Select v-model={state.formData.name} width={200} multiple tagsWrap>
        {options.map(opt => (
          <SelectOption value={opt.value} key={opt.value}>
            {opt.label}
          </SelectOption>
        ))}
      </Select>
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  const options = [
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true },
  ];

  return () => (
    <DemoRow title="多选:arraystring">
      <Select v-model={state.formData.name} width={200} multiple valueType="arraystring">
        {options.map(opt => (
          <SelectOption value={opt.value} key={opt.value}>
            {opt.label}
          </SelectOption>
        ))}
      </Select>
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  const options = [
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true },
  ];

  return () => (
    <DemoRow title="多选:arrayjson">
      <Select v-model={state.formData.name} width={200} multiple valueType="arrayjson">
        {options.map(opt => (
          <SelectOption value={opt.value} key={opt.value}>
            {opt.label}
          </SelectOption>
        ))}
      </Select>
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});
